<template>
	<view class="">
		<!-- 顶部选项卡效果 -->
		<scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation class="scroll-row">
			<view class="scroll-row-item px-5 py-3 fond-md" v-for="(item,index) in tabBars" :key="index"
				:id="'tab'+index" :class="tabIndex === index?'text-main font-lg font-weight-bold':''"
				@click="changeTab(index)">{{item.name}}</view>
		</scroll-view>

		<swiper :interval="3000" :duration="200" :style="'height:'+ scrollH +'px'" @change="onChangeTab"
			:current="tabIndex">
			<swiper-item v-for="(item,index) in newList " :key="index">
				<scroll-view scroll-y="true" :style="'height:'+ scrollH +'px'" @scrolltolower="loadmore(index)">
					
					<template v-if="item.list.length>0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表样式 -->
							<hot-list :item="item2" :index="index2"></hot-list>
							<!-- 分割线 -->
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>

					<!-- 没有任何数据时候的处理 -->
					<template v-else>
						<!-- 404页面 -->
						<nothing></nothing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 引进来
	import hotList from "@/components/news/hot-list.vue"
	import loadMore from "@/components/common/load-more.vue"
	export default {
		// 注册
		components: {
			hotList,
			loadMore
		},
		data() {
			return {
				//列表高度
				scrollH: 1000,

				scrollInto: "",
				// 标识当前的tab index位置 默认指向数组中 第0条数据
				tabIndex: 0,
				// 顶部显示区域数组
				tabBars: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '发现'
				}, {
					name: '动态'
				}, {
					name: '消息'
				}],
				newList: []
			}
		},
		onLoad() {
			//加载时同时获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					//px 此处需要把得到的rpx转换成px uni.upx2px
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
			this.getData()
		},
		// 监听点击了导航栏
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'/pages/search/search'
			})
		},
		//监听 导航栏 点击按钮事件
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'/pages/add-input/add-input'
			})
		},
		methods: {
			//上拉加载事件
			loadmore(index) {
				//获取当前列表
				let item = this.newList[index]
				//修改当前列表的加载状态
				item.loadmore = "加载中..."
				//模拟数据更新请求
				setTimeout(() => {
					//利用定时器，模拟瀑布流效果
					item.list = [...item.list, ...item.list]
					//恢复加载状态
					item.loadmore = '上拉加载更多'
				}, 1000)
			},
			//监听滑动
			onChangeTab(e) {
				// console.log(e.detail.current);
				this.changeTab(e.detail.current)
			},
			//获取数据 有多少选项就生成多少数据模板
			getData() {
				const arr = []
				for (let i = 0; i < this.tabBars.length; i++) {
					let obj = {
						//1 上拉加载 2 加载中 3 没有更多
						loadmore: "数据加载中",
						list: [
							{
								cover:"../../static/tabbar/jjy3.jpg",
								title:"话题名称1",
								desc:"话题描述1",
								news_count:100,
								today_count:20
							},
							{
								cover:"../../static/tabbar/jjy2.jpg",
								title:"话题名称2",
								desc:"话题描述2",
								news_count:101,
								today_count:21
							},
							{
								cover:"../../static/tabbar/微信图片_20240418093242.jpg",
								title:"话题名称3",
								desc:"话题描述3",
								news_count:102,
								today_count:22
							},
							{
								cover:"../../static/tabbar/微信图片_20240418090252.jpg",
								title:"话题名称4",
								desc:"话题描述4",
								news_count:103,
								today_count:23
							},
							{
								cover:"../../static/tabbar/jjy3.jpg",
								title:"话题名称5",
								desc:"话题描述5",
								news_count:104,
								today_count:24
							}
						]
						
					}
					arr.push(obj)
				}
				this.newList = arr
			},
			//切换选项卡方法
			changeTab(index) {
				// 如果已经是当前所选
				if (this.tabIndex === index) {
					return
				}
				this.tabIndex = index
				this.scrollInto = 'tab' + index
			},
			//响应子组件传递事件
			follow(e) {
				// 作为父组件知道 当前点击的子组件是哪一个
				// console.log(e);
				this.list[e].isFollow = true
				uni.showToast({
					title: "已关注"
				})
			},
			doSupport(e) {
				// console.log(e);
				// 得到当前点击的对象
				let item = this.list[e.index]
				// 判断当前对象顶或踩
				let msg = e.type === 'support' ? '顶' : '踩'
				// 到底是顶还是踩？还未明确

				//判断之前是否顶或踩过？
				if (item.support.type === '') {
					item.support[e.type + '_count']++
				}
				// 之前顶过
				else if (item.support.type === 'support' && e.type === 'unsupport') {
					// 顶-1 踩+1
					item.support.support_count--
					item.support.unsupport_count++
					// 之前踩过
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					// 顶+1 踩-1 
					item.support.support_count++
					item.support.unsupport_count--
				}
				//统一点击顶踩之后状态
				item.support.type = e.type
				// 可以使用定时器 模拟网络延迟效果
				//模拟0.5秒之后显示弹窗
				uni.showToast({
					title: msg + "成功"
				})
			}
		}
	}
</script>

<style>

</style>